<template>
    <div class="denglu">
        <!-- 登录注册的排版 -->
        <div class="login">
            <img src="./../../assets/she.png" alt="" class="shezhi">
            <img src="../.././assets/message.jpg" alt="" class="message">
            <img src="../../assets/person.jpg" alt="" class="person">
            <div v-if="!showLogin">
                <h2 @click="toLogin">登录/注册</h2>
            </div>
            <div v-else>
                <h2>{{ userInfo.nickname }}</h2>
                <img :src="userInfo.avatar" alt="" style="width: 5.8975rem;height: 5.4735rem;position: absolute;
                left: 0.875rem;top: 3.8735rem;border-radius: 2.8125rem;" @click="toPic">
            </div>

            <h3 style="font-weight: 900;color: #bebfc0;">账户管理 ></h3>
            <div class="hui">
                <img src="../../assets/chun.jpg" alt="" class="chun">
            </div>
        </div>
        <!-- 账户余额 -->
        <div >
            <div class="pai">
                <div class="money">
                    <div class="yu">
                        <span>0</span>
                        <div class="price">
                            账户余额(0)元
                        </div>
                    </div>
                    <div class="you">
                        <span>0</span>
                        <div class="price">
                            优惠券(张)
                        </div>
                    </div>
                    <div class="jin">
                        <span>0</span>
                        <div class="price">
                            金币
                        </div>
                    </div>
                    <div class="tao">
                        <span>0</span>
                        <div class="price">
                            套餐包
                        </div>
                    </div>
                </div>
                <div class="order">
                    <div>
                        <h3
                            style="position: absolute;width: 100px;left: 1.5rem;top: 0;font-weight:700;font-size: 1.5rem;">
                            我的订单</h3> <br>
                        <div style="margin-top: 50rem;margin-top: 17px;" class="imgss">
                            <van-grid :column-num="4" :border="false">
                                <van-grid-item style="position: absolute;left: 1rem;">
                                    <img src="../../assets//zi.jpg" alt="" style="width: 1.875rem;height: 1.875rem;">
                                    <div style="padding-top: 1rem;">图文咨询</div>
                                </van-grid-item>
                                <van-grid-item style="position: absolute;left: 110px;">
                                    <img src="../../assets//phone.jpg" alt="" style="width: 1.875rem;height: 1.875rem;">
                                    <div style="padding-top: 1rem;">电话咨询</div>
                                </van-grid-item>
                                <van-grid-item style="position: absolute;right: 110px;">
                                    <img src="../../assets//dan.jpg" alt="" style="width: 2.5rem;height: 1.875rem;">
                                    <div style="padding-top: 1rem;">商品订单</div>
                                </van-grid-item>
                                <van-grid-item style="position: absolute;right: 1rem;">
                                    <img src="../../assets//order.jpg" alt="" style="width: 2.5rem;height: 1.875rem;">
                                    <div style="padding-top: 1rem;">全部订单</div>
                                </van-grid-item>
                            </van-grid>
                        </div>
                    </div>
                    <div class="Handlefiles">
                        <h3
                            style="position: absolute;width: 100px;left: 1.5rem;top: 0;font-weight:700;font-size: 1.5rem;">
                            健康档案</h3>
                        <button class="files_btn" @click="ToHandleflies">+新建档案</button>
                        <van-swipe :loop="false" class="swipe" :width="210" :show-indicators="false">
                            <div v-for="(item, index) in list" :key="index" class="filess">
                                <van-swipe-item>
                                    <div class="file" style="border: 1px solid #ccc;margin-left: 15px;background-color:#0fba88;line-height: 25px;color: white;" >
                                        <span style="width: 100px;height: 20px;line-height: 38px;padding-left: 15px;"> {{
                                            item.name }}</span> <br>
                                        <span style="padding-left: 15px;">{{ item.sex }}
                                            <span>{{
                                                item.title }} <span>{{ item.age }}岁 </span></span>
                                        </span>
                                    </div>
                                </van-swipe-item>
                            </div>
                        </van-swipe>
                    </div>
                </div>
            </div>
            <!-- 宫格排版加效果 -->
            <div class="gong" style="margin-top: -180px;">
                <h3 style="margin-top: 0.1rem;margin-left: 1rem;font-size: 1.5rem;">工具与服务</h3>
                <div class="imgs">
                    <van-grid :column-num="4" :border="false">
                        <van-grid-item @click="Todoctor">
                            <img src="../../assets//1.jpg" alt="" style="width: 1.875rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">我的医生</div>
                        </van-grid-item>
                        <van-grid-item>
                            <img src="../../assets//2.jpg" alt="" style="width: 1.875rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">我的处方</div>
                        </van-grid-item>
                        <van-grid-item>
                            <img src="../../assets//3.jpg" alt="" style="width: 2.5rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">我的设备</div>
                        </van-grid-item>
                        <van-grid-item>
                            <img src="../../assets//4.jpg" alt="" style="width: 2.5rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">姨妈助手</div>
                        </van-grid-item>
                    </van-grid>
                </div>
                <div style="margin-top: 50rem;margin-top: 1rem;" class="imgss">
                    <van-grid :column-num="4" :border="false">
                        <van-grid-item>
                            <img src="../../assets//5.jpg" alt="" style="width: 1.875rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;" @click="tocollect">我的收藏</div>
                        </van-grid-item>
                        <van-grid-item @click="Toaddress">
                            <img src="../../assets//6.jpg" alt="" style="width: 1.875rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">收货地址</div>
                        </van-grid-item>
                        <van-grid-item @click="Towebcocket">
                            <img src="../../assets//7.jpg" alt="" style="width: 2.5rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">春雨客服</div>
                        </van-grid-item>
                        <van-grid-item>
                            <img src="../../assets//8.jpg" alt="" style="width: 2.5rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">有奖推荐</div>
                        </van-grid-item>
                    </van-grid>
                </div>
                <div style="margin-top: 50rem;margin-top: 1rem;" class="imgsss">
                    <van-grid :column-num="4" :border="false">
                        <van-grid-item style="margin-left: 0rem;">
                            <img src="../../assets//9.jpg" alt="" style="width: 1.875rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">免费使用</div>
                        </van-grid-item>
                        <van-grid-item style="margin-left: -12rem;">
                            <img src="../../assets//10.jpg" alt="" style="width: 1.875rem;height: 1.875rem;">
                            <div style="padding-top: 1rem;">关于我们</div>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
        </div>

       </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
const router = useRouter()
const list = ref([])
import { Swipe, SwipeItem } from 'vant';
// 本地存储信息
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')));
const showLogin = ref(false);
const Todoctor = () => {
    router.push({ path: '/MyDoctor' });

}
//跳转到新建档案
const ToHandleflies=()=>{
    router.push({ path: '/editor' });

}
// 跳转到账户信息页面
const toPic = () => {
    router.push({ path: '/pic' });
}
const Towebcocket = () => {
    router.push({ path: '/customerIndex' });
}
// 跳转到登录页面
const toLogin = () => {
    router.push({ path: '/login' });

}
const tocollect = () => {
    router.push({ path: '/shoucang' });
}
const Toaddress = () => {
    router.push({ path: '/address' });
}
// 生命周期判断token是否存在
onMounted(() => {
    if (localStorage.getItem('token')) {
        showLogin.value = true;
    }
})
import axios from 'axios'
const getlist = async () => {
    await axios.get('/addres/ChunYuperson').then(res => {
        console.log(res)
        list.value = res.data.data
        console.log(list.value)
    }).catch(err => {
        console.log(err)
    })
}
getlist()
</script>

<style lang="scss" scoped>
.login {
    position: relative;
    display: flex;
    width: 100%;
    height: 14.6875rem;
    background: url('../../assets//img//1.jpg') no-repeat;
    background-size: cover;

    .shezhi {
        width: 1.875rem;
        height: 1.875rem;
        position: absolute;
        right: 4.0625rem;
        top: 1.25rem;
    }

    .message {
        width: 1.875rem;
        height: 1.875rem;
        position: absolute;
        right: 1.0625rem;
        top: 1.25rem;
    }

    .person {
        position: absolute;
        left: 0.875rem;
        top: 3.875rem;
        width: 5.9375rem;
        height: 5.4735rem;
    }

    h2 {
        position: absolute;
        left: 7.875rem;
        top: 30%;
        font-weight: normal;
    }

    h3 {
        position: absolute;
        left: 7.875rem;
        top: 45%;
        color: #dddee0;
    }

    .chun {
        width: 95%;
        height: 3rem;
        position: absolute;
        left: 0.65rem;
        top: 13rem;
        z-index: 99999;
        border-top-left-radius: 0.5rem;

    }
}

.pai {
    display: flex;
    width: 100%;
    height: 30rem;
    position: relative;
    background-color: #f2f2f2;

    .money {
        display: flex;
        width: 95%;
        height: 6rem;
        background-color: white;
        position: absolute;
        left: 0.7rem;
        top: 2.5rem;

        .yu {
            width: 7.875rem;
            height: 7.75rem;
            position: absolute;

            span {
                position: absolute;
                line-height: 5rem;
                left: 3.25rem;
            }

            .price {
                position: absolute;
                left: 0.4rem;
                top: 3.5rem;
                color: #727272;
            }
        }

        .you {
            width: 7.875rem;
            height: 7.75rem;
            position: absolute;

            span {
                position: absolute;
                line-height: 5rem;
                left: 9.25rem;
            }

            .price {
                position: absolute;
                width: 61%;
                left: 7.3rem;
                top: 3.5rem;
                color: #727272;
            }
        }

        .jin {
            width: 7.875rem;
            height: 7.75rem;
            position: absolute;

            span {
                position: absolute;
                line-height: 5rem;
                left: 15.1rem;
            }

            .price {
                position: absolute;
                width: 61%;
                left: 14.5rem;
                top: 3.5rem;
                color: #727272;
            }
        }

        .tao {
            width: 7.875rem;
            height: 7.75rem;
            position: absolute;

            span {
                position: absolute;
                line-height: 5rem;
                left: 20.2rem;
            }

            .price {
                position: absolute;
                width: 61%;
                left: 19.1rem;
                top: 3.5rem;
                color: #727272;
            }
        }
    }
}

.gong {
    width: 95%;
    height: 25.5rem;
    display: flex;
    background-color: white;
    position: relative;
    top: 12rem;

    .imgs {
        position: absolute;
        top: 3rem;
        width: 100%;
        height: 5.125rem;
    }

    .imgss {
        position: absolute;
        top: 8rem;
        width: 100%;
        height: 5.125rem;
    }

    .imgsss {
        position: absolute;
        top: 13rem;
        width: 100%;
        height: 5.125rem;
    }
}

.order {
    display: flex;
    width: 95%;
    height: 9rem;
    background-color: white;
    position: absolute;
    left: 0.7rem;
    top: 9.5rem;
}

.Handlefiles {
    width: 100%;
    height: 150px;
    background-color: white;
    position: absolute;
    top: 164px;
}

.files_btn {
    position: absolute;
    right: 10px;
    width: 120px;
    height: 30px;
    border-radius: 15px;
    border: none;
    outline: none;
    top: 10px;
    background-color: #eceff6;
    color: #297ce1;
    z-index: 99999;
}
.swipe {
    width: 100%;
}
.file{
    margin-top: 50px;
}
</style>
